<!--
 * @Description: 数泽MES
 * @Author: 数泽
 * @Date: 2023-10-27 16:08:02
-->
<template>
  <el-dialog :model-value="visible" :close-on-click-modal="false" :title="title"
             :show-close="false" width="700px">
    <WkDepUserView :props="props" :dep-value="deps" :user-value="users" @change="selectChange"/>
    <template v-slot:footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button v-debounce="handleConfirm" type="primary">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import WkDepUserView from './DepUserView.vue'

import {objDeepCopy} from '/src/utils/index.js'


defineOptions({
  // 弹窗选择员工
  name: 'WkDepUserViewDialog',
})

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false
  },
  // 取值字段
  props: {
    type: Object,
    default: () => {
      return {}
    }
  },
  closeOnEmptyValue: {
    type: Boolean,
    default: true
  },
  depValue: {
    type: Array,
    default: () => {
      return []
    }
  },
  userValue: {
    type: Array,
    default: () => {
      return []
    }
  }
})

const optionData = reactive({
  title: '选择员工',
  users: [],
  deps: []
})

const emits = defineEmits(['update:visible', 'change'])


watch(() => props.visible, (val) => {
  optionData.users = objDeepCopy(props.userValue)
  optionData.deps = objDeepCopy(props.depValue)
}, {
  immediate: true
})

function close() {
  emits('update:visible', false)
}

function selectChange(users, deps) {
  optionData.users = users
  optionData.deps = deps
}

/**
 * 点击确定
 */
function handleConfirm() {
  emits('change', optionData.users, optionData.deps)
  if (props.closeOnEmptyValue) {
    if (optionData.users.length !== 0 || optionData.deps.length !== 0) {
      close()
    }
  } else {
    close()
  }
}


</script>
<script>

export default {

  components: {
    // WkDepUserView
  },
  mixins: [],
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.el-dialog__wrapper {
  :deep(.el-dialog__body) {
    border-top: 1px solid $xr-border-color-base;
  }
}
</style>
